<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="form">
    <input type="hidden" name="id" id="id" th:value="${bookInstance.id}"/>
    <input type="hidden" name="version" id="version" th:value="${bookInstance.version}"/>
    
    <div class="row">
        <div class="col-md-12">
            
            <div class="form-group">
                <input type="text" class="form-control" name="title" required
                       id="inputBook-title" th:value="${bookInstance.title}">
                <span class="form-bar"></span>
                <label for="inputBook-title" th:text="#{book.title.label}">title</label>
            </div>
            
            <div class="form-group">
                <input type="number" class="form-control" name="price" 
                       id="inputBook-price" th:value="${bookInstance.price}">
                <span class="form-bar"></span>
                <label for="inputBook-price" th:text="#{book.price.label}">price</label>
            </div>
            
            <div class="form-group">
                <input type="text" class="form-control datepicker" name="publishDate" 
                       id="inputBook-publishDate" th:value="${bookInstance.publishDate}">
                <span class="form-bar"></span>
                <label for="inputBook-publishDate" th:text="#{book.publishDate.label}">publishDate</label>
            </div>
            
            <div class="form-group">
                <input type="number" class="form-control" name="pageNumber" 
                       id="inputBook-pageNumber" th:value="${bookInstance.pageNumber}">
                <span class="form-bar"></span>
                <label for="inputBook-pageNumber" th:text="#{book.pageNumber.label}">pageNumber</label>
            </div>
            
            <div class="form-group">
                <select class="form-control selectpicker" name="author.id" title="--"
                        id="inputBook-author"
                        data-placeholder="select：" >
                    <option value=""></option>
                    <option th:each="author:${authors}" th:value="${author.id}"
                            th:selected="${#strings.equals(bookInstance.authorId,author.id)}"
                            th:text="${author.toString()}">name：
                    </option>
                </select>
                <span class="form-bar"></span>
                <label for="inputBook-author" th:text="#{book.author.label}">author</label>
            </div>
            
        </div>
    </div>
</div>
<div th:fragment="show">

    <div class="form-group-separated">
        <div class="form-group">
            
            <div class="form-group">
                <label class="col-md-4 col-xs-5 control-label" th:text="#{book.title.label}">title</label>
                <div class="col-md-8 col-xs-7"><label th:utext="${bookInstance.title}"/></div>
            </div>
            
            <div class="form-group">
                <label class="col-md-4 col-xs-5 control-label" th:text="#{book.price.label}">price</label>
                <div class="col-md-8 col-xs-7"><label th:utext="${bookInstance.price}"/></div>
            </div>
            
            <div class="form-group">
                <label class="col-md-4 col-xs-5 control-label" th:text="#{book.publishDate.label}">publishDate</label>
                <div class="col-md-8 col-xs-7"><label
                        th:utext="${#dates.format(bookInstance.publishDate,'yyyy-MM-dd')}"/></div>
            </div>
            
            <div class="form-group">
                <label class="col-md-4 col-xs-5 control-label" th:text="#{book.pageNumber.label}">pageNumber</label>
                <div class="col-md-8 col-xs-7"><label th:utext="${bookInstance.pageNumber}"/></div>
            </div>
            

            
        </div>

    </div>

</div>